<template>
    <div class="OD-base-setting">
        <el-tabs :tab-position="'left'" class="tab-area" @tab-click="changeBaseInfoTab">
            <el-tab-pane class="store-pane" label="门店信息">
                <store-pane ref="refStorePane" />
            </el-tab-pane>
            <el-tab-pane class="company-pane" label="公司信息">
                <company-pane ref="refCompanyPane" />
            </el-tab-pane>
            <el-tab-pane class="section-pane" label="采购列表">
                <section-pane ref="refSectionPane" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import storePane from './store-pane';
    import companyPane from './company-pane';
    import sectionPane from './section-pane';

    export default {
        name: 'base_info',
        components: {
            companyPane,
            storePane,
            sectionPane
        },
        methods: {
            changeBaseInfoTab(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>

<style lang="scss">
    .OD-base-setting {
        .tab-area {
            margin: 30px 50px 30px 80px;

            .el-tabs__header {
                margin-right: 0;

                .el-tabs__nav-wrap {
                    &::after {
                        width: 0;
                    }
                }
            }

            .el-tabs__content {
                border-left: 1px solid #ccc;
                padding: 0 20px;
            }
        }
    }
</style>
